/* pages/mine/payment/payment.scss */
page{
  padding: 0;
}

// 导航栏模块
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5; 
}



// 订单列表样式
.order-list {
  padding: 12px;
}

.van-count-down{
  color: red !important; 
}

.lastTime{
  font-size: 14px;
  display: flex;
  flex-direction: row;
}

.order-item {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;

  //待支付状态
  .order-status {
    color: #ff7d00;
    font-size: 14px;
    font-weight: 500;
  }

  //待消费状态
  .to-be-consumed{
    font-size: 14px;
  }

  //待评价状态
  .evaluate{
    font-size: 14px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    text{ 
      &:last-child{
        color: rgb(255, 157, 0);
      }
    }
  }

  //售后状态
  .after-sale{
    font-size: 14px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    text{ 
      &:last-child{
        color: red;
      }
    }
  }

  .delete-btn {
    display: flex;
    align-items: center;
    color: #ff4d4f;
    font-size: 14px;

    text {
      margin-left: 4px;
    }
  }
}

.order-body {
  padding: 16px;
  display: flex;

  .product-img {
    width: 100px;
    height: 80px !important;
    border-radius: 4px;
    object-fit: cover;
  }

  .product-info {
    margin-left: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .product-name {
      font-size: 16px;
      color: #333;
      font-weight: 500;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .product-date, .product-person {
      font-size: 12px;
      color: #666;
    }
  }
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid #f5f5f5;
  font-size: 14px;
  .price {
    display: flex;
    align-items: baseline;

    .symbol {
      font-size: 14px;
      color: #ff4d4f;
    }

    .amount {
      font-size: 18px;
      color: #ff4d4f;
      font-weight: 600;
      margin-left: 2px;
    }
  }

  //取消按钮
  .action-btn {
    width: 100px;
    background-color: orangered;
    color: #fff;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    margin-left: 80px;
    margin-right: 20rpx;
  }

  //待付款页面按钮
  .pay-btn {
    width: 120px;
    background-color: #1677ff;
    color: #fff;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    margin-right: 20rpx;
  }

  //待使用页面按钮
  .getcode-btn {
    margin-right: 0;
    width: 120px;
    background-color: #ff1629;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
  }
  .getcode-btn2 {
    margin-right: 0;
    width: 60px;
    background-color: rgb(252, 126, 168);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
  }

  .getcode-btn3 {
    margin-right: -100rpx;
    width: 60px;
    background-color: #ffb570 ;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
  }
  .red{
    margin-right: -100rpx;
    width: 60px;
    background-color: #6bbcff ;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
  }
}

.block {

  width: 100%;
  height: 700rpx;
  background-color: #fff;
  .one{

    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .text{
      padding: 20rpx;
      font-size: 28rpx;
      font-weight:bold;
    }
    image{
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
    }
    view{
      padding: 20rpx;
      font-size: 24rpx;

    }
  }
}
/* 外层容器 */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height:20%;
  position: fixed; 
  bottom: 0; 
  left: 0; 
  right: 0; 
}

.wrapper2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height:10%;
  position: fixed; 
  bottom: 0; 
  left: 0; 
  right: 0; 
}

/* 密码容器：相对定位 */
.password-wrapper {
 position: relative;  /* 关键：作为子元素的定位参考 */
  padding: 100rpx;
  height: 80rpx; /* 与输入框高度一致，作为定位参考 */
}

/* 输入框：透明可见但实际接收输入 */
.password-input {
  padding: 0;
  border: none;
  background: transparent;  /* 完全透明 */
  color: transparent;       /* 输入文字透明（不显示明文） */
  font-size: 0;             /* 去除默认文字大小影响 */
    height: 600rpx; /* 用正值，确保高度足够覆盖点阵 */
    position: absolute; /* 改为绝对定位，精确控制位置 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* 让输入框充满父容器，完全覆盖点阵 */
  z-index:1;
  caret-color: transparent !important; /* 关键：将光标颜色设置为透明 */
  opacity: 0;
  -webkit-text-security: disc; /* 增强密码显示兼容性（可选） */
}

/* 点阵覆盖层：绝对定位在输入框上方 */
.password-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 覆盖在输入框上方，但不影响点击穿透 */
  pointer-events: none;  /* 关键：允许点击穿透到下方输入框 */
  z-index: 2;
}

/* 提示文字 */
.prompt-text {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
}

/* 密码点阵样式 */
.password-dots {
  display: flex;
  justify-content: center;
  gap: 20rpx;
  width: 100%;
}

.dot {
  width: 30rpx;
  height: 30rpx;
  border: 2rpx solid #666;
  border-radius: 50%;
  background-color: transparent;
}

.dot.filled {
  background-color: #333;
}
    

// 空状态样式
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 80px;

  image {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
  }

  text {
    font-size: 16px;
    color: #999;
    margin-bottom: 24px;
  }

  button {
    background-color: #1677ff;
    color: #fff;
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 14px;
  }
}

.anniu{
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgb(25, 127, 199);
  view{
   
    &:nth-of-type(2){
      border: 2rpx solid rgb(207, 207, 207);
      background-color: rgb(223, 215, 215);
      height: 60rpx;
    }
    &:first-of-type{
      width: 80rpx;
      margin-left:170rpx;
    }
    
    &:last-of-type{
        margin-right:100rpx ;
    }
  }
}
